<template>
    <div>
        <div class="outmain ba_f">
<!--            <el-form :inline="true" :model="formInline" class="demo-form-inline mar_t20">-->
<!--                <el-form-item label="选择店铺">-->
<!--                    <el-select v-model="formInline.region" placeholder="请选择选择店铺" @change="changeStore">-->
<!--                        <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name+'(ID:'+item.id+')'"-->
<!--                                :value="item.id">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="changeStore">查询</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
            <el-form :inline="false" :model="form" class="demo-form-inline" label-width="100px">
              <div class="flex ba_f">
                <el-form-item label="查询日期：" class="mar_t20">
                  <div class="flex-bet">
                    <div>
                      <el-radio-group v-model="form.timeType" @change="selectType">
                        <el-radio-button label="1">今天</el-radio-button>
                        <el-radio-button label="2">近七天</el-radio-button>
                        <el-radio-button label="3">近十五天</el-radio-button>
                        <el-radio-button label="4">自定义时间</el-radio-button>
                      </el-radio-group>
                      <span class="mar_l20" v-if="form.timeType=='4'">
                  <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                  end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
                </span>
                    </div>
                  </div>
                </el-form-item>
              </div>
              <div class="flex ba_f">
                <el-form-item label="选择店铺：">
                  <div class="">
                    <el-select v-model="form.shopValue" placeholder="请选择" @change="changeStore">
                      <el-option v-for="item in options" :key="item.id" :label="item.name+'(ID:'+item.id+')'"
                                 :value="item.id"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </div>
            </el-form>
        </div>
<!--        <div class="outmain ba_f mar_t20">-->
<!--            <div class="shuju_title mar_b20">-->
<!--                <div class="shuju_title_text">-->
<!--                    <span>待结算账单</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <el-table-->
<!--                    :data="tableData2"-->
<!--                    stripe-->
<!--                    style="width: 100%">-->
<!--                <el-table-column-->
<!--                        prop="day"-->
<!--                        label="账单时间"-->
<!--                >-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="money"-->
<!--                        label="结算金额（元）"-->
<!--                >-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="settlement"-->
<!--                        label="预计结算时间"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div class="flex">-->
<!--                            预计{{scope.row.settlement}}结算-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="state"-->
<!--                        label="结算状态"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div class="flex color-green" v-show="scope.row.state==1">-->
<!--                            已结算-->
<!--                        </div>-->
<!--                        <div class="flex color-red" v-show="scope.row.state==2">-->
<!--                            待结算-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="sr"-->
<!--                        label="操作"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div class="flex">-->
<!--                            <el-button type="text" @click="handleDetail(scope.row)">查看详情</el-button>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->
<!--        </div>-->
        <div class="outmain ba_f mar_t20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>财务对账</span>
                </div>
            </div>
<!--            <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--                <el-tab-pane label="日汇总" name="1"></el-tab-pane>-->
<!--                <el-tab-pane label="月汇总" name="2"></el-tab-pane>-->
<!--            </el-tabs>-->
<!--            <el-form :inline="true" :model="formInline" class="demo-form-inline mar_t20">-->
<!--                <el-form-item label="选择日期" v-show="activeName=='1'">-->
<!--                    <el-date-picker-->
<!--                            v-model="formInline.time"-->
<!--                            type="daterange"-->
<!--                            range-separator="至"-->
<!--                            start-placeholder="开始日期"-->
<!--                            end-placeholder="结束日期">-->
<!--                    </el-date-picker>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="选择月份" v-show="activeName=='2'">-->
<!--                    <el-date-picker-->
<!--                            v-model="formInline.mouth"-->
<!--                            type="month"-->
<!--                            value-format=yyyy-MM-->
<!--                            placeholder="选择月">-->
<!--                    </el-date-picker>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="onSubmit2">查询</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%"
            class="tablecenter">
                <el-table-column
                        prop="day"
                        label="日期"
                >
                </el-table-column>
              <el-table-column
                  prop="count"
                  label="有效订单数"
              >
                <template slot-scope="scope">
                  <div class="wei">{{scope.row.count}}</div>
                </template>
              </el-table-column>
                <el-table-column
                        prop="money"
                        label="营业总额"
                >
                  <template slot-scope="scope">
                    <div class="color-green wei">+￥{{scope.row.money}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="serviceMoney"
                    label="平台服务费"
                >
                  <template slot-scope="scope">
                    <div class="color-red wei">-￥{{scope.row.serviceMoney}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                        prop="storeActualMoney"
                        label="预计收入"
                >
                    <template slot-scope="scope">
                        <div class="color-green wei">+￥{{scope.row.storeActualMoney}}</div>
                    </template>
                </el-table-column>
    <!--                <el-table-column-->
    <!--                        prop="zc"-->
    <!--                        label="支出"-->
    <!--                >-->
    <!--                    <template slot-scope="scope">-->
    <!--                        <div class="color-red">-{{scope.row.zc}}</div>-->
    <!--                        <div>{{scope.row.bs}}笔</div>-->
    <!--                    </template>-->
    <!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="settlement"-->
<!--                        label="预计结算时间"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div class="flex">-->
<!--                           预计{{scope.row.settlement}}结算-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="state"-->
<!--                        label="结算状态"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div v-show="scope.row.state==1" class="color-green">已结算</div>-->
<!--                        <div v-show="scope.row.state==2" class="color-red">待结算</div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="cc"
                        label="操作"
                        width="300"
                >
                    <template slot-scope="scope">
                        <div class="flex-center">
                            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
<!--                            <el-button type="text"><a :href="handelExport(scope.row)">导出外卖</a></el-button>-->
<!--                            <el-button type="text"><a :href="handelExport2(scope.row)">导出其他</a></el-button>-->
<!--                            <el-button type="text" @click="handelPrinting(scope.row)">打印日结单</el-button>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.size"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {mapState} from 'vuex'
    import { waitMoney,billList,orderExport,otherOrderExport,billPrint} from "@/api/statistics";
    import {changeDate} from "@/utils/index";
    import index from '../../api/index';
    export default {
        data() {
            return {
                formInline: {
                    value1: '',
                    value2: '',
                    region: '',
                    time: [],
                    mouth: '',
                },
              form: {
                shopValue: '',
                timeType: '1',
                time: [new Date(), new Date()],
                Mtime: ''
              },
                options:[],
                activeName: '1',
                tableData: [],
                tableData2: [],
                page: {
                    total: 0,
                    size: 20,
                    currentPage: 1,
                },
            }
        },
        created() {
            this.form.shopValue = this.market[0].id
            this.options = this.market

            // this.waitMoney();
            this.billList();
        },
        computed:{
            ...mapState(['market'])
        },
        methods: {
            handleClick() {
            },
            handleDetail(row) {
                this.$router.push(`/financerecordDetail?time=${row.day}&storeId=${this.form.shopValue}`);
            },
            async handelPrinting(row){
                const {msg} = await billPrint({time:row.day});
                this.$baseMessage(msg, "success");
            },
            handelExport(row){
                let backendPath = index.backendPath
                return backendPath + "channel/store-bill/order-export?time="+row.day
            },
            handelExport2(row){
                let backendPath = index.backendPath
                return backendPath + "channel/store-bill/other-order-export?time="+row.day
            },
            // async waitMoney(){
            //     const { data } = await waitMoney({storeId:this.form.shopValue});
            //     console.log(data);
            //     this.tableData2 = data
            // },
            async billList(){
                // if(this.formInline.time){
                //     var startTime = changeDate(this.formInline.time[0]);
                //     var endTime = changeDate(this.formInline.time[1]);
                // }
                var params = {
                    page: this.page.currentPage,
                    // timeType: this.activeName,
                    timeType: this.form.timeType,
                    startTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[0]).substr(0,10) : '',
                    endTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[1]).substr(0,10) : '',
                    // mouth:this.formInline.mouth,
                    storeId:this.form.shopValue
                };
                const { data ,count} = await billList(params);
                // console.log(data);
                this.tableData = data
                this.page.total = count
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.billList();
            },
            selectType(){
                this.billList()
              },
            changeStore(){
                // this.waitMoney()
                this.billList()
            },
            onSubmit2(){
                this.billList()
            },
        }
    }
</script>
